
<template>
<el-card>
    <my-search v-model="pgData" @search="doSearch">
        <div slot="time"></div>
        <div slot="title"></div>
        <div slot="cx"></div>
        <div class="search_aear">
            <div class="labels">
                <el-form-item  label="清单名称：" >
                    <el-input  placeholder="请输入清单名称" v-model="pgData.parentName"  clearable></el-input>
                </el-form-item>
                <el-form-item  label="申请单位：" >
                    <el-input  placeholder="请输入申请单位" v-model="pgData.appName"  clearable></el-input>
                </el-form-item>
                <el-form-item  label="确认状态：">
                    <my-select :data="isConfirmList" :props="{label:'value',value:'key'}" v-model="pgData.isConfirm" placeholder="请选择确认状态"></my-select>
                </el-form-item>
                <el-form-item  label="结算状态：">
                    <my-select :data="isSettList" :props="{label:'value',value:'key'}" v-model="pgData.isSett" placeholder="请选择结算状态"></my-select>
                </el-form-item>
                <el-form-item  label="开票状态：">
                    <my-select :data="isInvoiceList" :props="{label:'value',value:'key'}" v-model="pgData.isInvoice" placeholder="请选择开票状态"></my-select>
                </el-form-item>
                <el-form-item  label="申请时间：">
                    <el-date-picker
                        v-model="valuetime"
                        type="daterange"
                        value-format="yyyy-MM-dd"
                        format="yyyy-MM-dd"
                        range-separator="至"
                        start-placeholder="申请开始日期"
                        end-placeholder="申请结束日期">
                    </el-date-picker> 
                </el-form-item>
            </div>
            <div class="btns">
                <el-button size="small" type="primary" icon="el-icon-search" @click="doSearch">查询</el-button>
                <el-button size="small" type="success" icon="el-icon-download" @click="exportList" class="btn_dc">导出</el-button>
            </div>
        </div>
    </my-search>

    <my-table :data="tableData" :height="tableHeight"  class="table_aera">
        <el-table-column type="index" width="40"></el-table-column>
        <el-table-column prop="itemName" label="清单名称" >
            <template slot-scope="scope" >
                {{scope.row.itemName}}{{scope.row.isChangnei == 0 ? '-场外' : '-场内'}}
            </template>
        </el-table-column>
        <el-table-column prop="childAmount" label="清单总额" ></el-table-column>
        <el-table-column prop="settAmount" label="结算总额"></el-table-column>
        <el-table-column prop="appName" label="申请单位" ></el-table-column>
        <el-table-column prop="receName" label="结算单位" ></el-table-column>
        <el-table-column prop="appTime" label="申请时间" min-width="130"></el-table-column>
        <el-table-column prop="isConfirm" label="确认状态" >
            <template slot-scope="scope" >
                <el-tag v-if="scope.row.isConfirm == '0'" type="info" size="small">未确认</el-tag>
                <el-tag v-if="scope.row.isConfirm == '1'" type="success" size="small">已确认</el-tag>
            </template>
        </el-table-column>
        <el-table-column prop="confirmTime" label="确认时间"  min-width="130"></el-table-column>
        <el-table-column prop="isSett" label="结算状态" >
            <template slot-scope="scope" >
                <el-tag v-if="scope.row.isSett == '0'" type="info" size="small">未结算</el-tag>
                <el-tag v-if="scope.row.isSett == '1'" type="success" size="small">已结算</el-tag>
            </template>
        </el-table-column>
        <el-table-column prop="settTime" label="结算时间" min-width="130"></el-table-column>

        <el-table-column prop="isInvoice" label="开票状态" >
            <template slot-scope="scope" >
                <el-tag v-if="scope.row.isInvoice == '0'" type="info" size="small">未开票</el-tag>
                <el-tag v-if="scope.row.isInvoice == '1'" type="success" size="small">已开票</el-tag>
            </template>
        </el-table-column>
        <el-table-column prop="invoiceTime" label="开票时间" min-width="130"></el-table-column>

        <el-table-column prop="" label="操作" min-width="140" >
            <template slot-scope="scope" >
                <el-button type="text"  @click="goDetail(scope.row)">清单详情</el-button>
                <el-button type="text"  @click="uploadPz(scope.row)" v-if="scope.row.isConfirm == 1 && scope.row.isSett == 0 && scope.row.isInvoice == 1">财务确认</el-button> 
                <el-button type="text"  @click="watckPz(scope.row)" v-if="scope.row.isSett == 1">结算凭证</el-button>
                <el-button type="text"  @click="affirmList(scope.row)" v-if="scope.row.isConfirm == 0 ">确认清单</el-button>
                <el-button type="text"  @click="downloadfp(scope.row)" v-if="scope.row.isInvoice == 1 ">下载发票</el-button>
            </template>
        </el-table-column>

    </my-table>

    <my-pagination
        ref="page"
        v-model="tableData"
        :action="$store.getters.settUrl + '/settItemChild'"
        :search="pgData"
        :after-query="afterQuery">
    </my-pagination>

    <!-- 财务确认-->
    <my-dialog
        :title="formTitle"
        :width="'40%'"
        v-model="dialogUploadpzVisible">
        <uploadpz ref="uploadpz" v-if="dialogUploadpzVisible" @close="dialogUploadpzVisible = false" :rowguid="rowguid" :qdname="itemName" :requesturl = "requestUrl"></uploadpz>
    </my-dialog>

    <my-dialog
        class="invoice"
        :title="formTitle"
        :width="'50%'"
        v-model="dialogPingzhengVisible">
            <div v-show="jspz">
                <img :src="imgurl" alt="" style="width:100%">
            </div>
            <div style="text-align: center;font-size: 16px;color:#F56C6C" v-show="!jspz">
                结算凭证未上传
            </div>
    </my-dialog>
    
</el-card>

</template>

<script>
import LIST_MIXIN from '@mixins/list-page'
import uploadpz from './uploadpz.vue'



export default {
    mixins: [ LIST_MIXIN ],
    props:[],
    components:{uploadpz},
    data: function(){
        return{
            pgData:{
                appStartDate:'',
                appEndDate:'',
            },
            tableData:[],
            isConfirmList:[
                {value:'未确认',key:'0'},
                {value:'已确认',key:'1'},
            ],
            isSettList:[
                {value:'未结算',key:'0'},
                {value:'已结算',key:'1'},
            ],
            isInvoiceList:[
                {value:'未开票',key:'0'},
                {value:'已开票',key:'1'},
            ],

            dialogUploadpzVisible:false,
            dialogPingzhengVisible:false,
            formTitle:'',
            rowguid:'',
            itemName:'',
            imgurl:'',
            requestUrl:'/bhtong/settmg/settItemChild/sett',
            jspz:false
        }
    }, 
    computed:{
        valuetime:{
            get:function(){
                var startTime = this.pgData.appStartDate || '';
                var endtime = this.pgData.appEndDate || '';
                    if(startTime && endtime){
                        return[
                            startTime,
                            endtime
                        ];
                    }else{
                        return[]
                    }
            },
            set:function(val){
                if(!val){
                    this.pgData.appStartDate = '' ;
                    this.pgData.appEndDate = '';
                }else{
                    var startTime = val[0] || '';
                    var endtime = val[1] || '';
                    this.pgData.appStartDate = startTime;
                    this.pgData.appEndDate = endtime;
                }
            },
        }
    },
    watch:{
        dialogUploadpzVisible: function(n, o){
            if(!n){
                this.doSearch();
            }
        },
    },

    methods: {
        doSearch:function(){
            this.$refs.page.queryData();
        },
        afterQuery:function(){
            this.tableHeight = (window.innerHeight - 245);
        },
        //跳转详情
        goDetail:function(row){
            if(this.getQuery('token')){
            this.goto({
                path: './detail',
                query: {
                    rowguid: row.rowguid,
                    token:this.getQuery('token')
                }
            })
            }else{
                this.goto({
                    path: './detail',
                    query: {
                        rowguid: row.rowguid
                    }
                }) 
            }
        },
        //财务确认
        uploadPz:function(row){
            this.dialogUploadpzVisible = true;
            this.formTitle = '财务确认';
            this.rowguid = row.rowguid;
            this.itemName = row.itemName;
        },
        //查看凭证
        watckPz:function(row){
            var search = toSearch({
                token:this.getQuery('token') ? this.getQuery('token') : this.getGetters('user').token
            });
            this.imgurl =  '/bhtong/' + row.settFile + search
            if(row.settFile){
                //结算凭证
                this.jspz = true;
            }
            this.formTitle = '查看凭证';
            this.dialogPingzhengVisible = true
        },
        //确认清单
        affirmList:function(row){
            var that = this;
            ShowConfirm('是否确认当前清单' , 'warning', function() {
                that.$post(that.$store.getters.settUrl + '/settItemChild/confirm',{
                    rowguid:row.rowguid
                },function(data,res){
                    if(res.code == 'v'){
                        ShowMsg('确认成功','success');
                    }else{
                         ShowMsg(res.msg,'warning');
                    }
                    that.doSearch();
                })
            }, function() {
                  ShowMsg('已取消操作','info');
            })
        },
        //下载发票
        downloadfp:function(row){
            var search = toSearch({
                fileName:row.invoiceFile
            });
            window.open('/bhtong/common/file/download' + search)
        },
        //导出
        exportList:function(){
            // if(this.tableData.length != 0){
            //     var search = toSearch({
            //         isExport: true,
            //         token:this.getQuery('token') ? this.getQuery('token') : this.getGetters('user').token
            //     });
            //     window.open('/bhtong/settmg/settItemChild' + search);
            // }else{
            //     ShowMsg('当前清单暂无数据，暂不支持导出', 'warning');
            // }
            var search = toSearch({
                parentName:this.pgData.parentName,
                appName:this.pgData.appName,
                isConfirm:this.pgData.isConfirm,
                isSett:this.pgData.isSett,
                isInvoice:this.pgData.isInvoice,
                appStartDate:this.pgData.appStartDate,
                appEndDate:this.pgData.appEndDate,
                isExport: true,
                token:this.getQuery('token') ? this.getQuery('token') : this.getGetters('user').token
            });
            window.open('/bhtong/settmg/settItemChild' + search);
        }
    },
    mounted() {
        
    }
}
</script>

<style scoped lang="scss">

::v-deep .el-table th > .cell {
    text-align: center;
}
::v-deep .el-table .cell {
    text-align: center;
}  
.test{
    float: right;
    line-height: 33px;
}
.search_aear{
    display: flex;
    justify-content: space-between;
    .labels{
        flex: 1;
    }
    .btns{
        width: 90px;
        text-align: right;
        .btn_dc{
            margin-top: 8px;
        }
    }
}



</style>
